<script setup lang="ts">
import { ref } from 'vue'
import { getArticleListApi } from '@/api/article'
import { getJackWingNoteListApi } from '@/api/jack'
import { onLoad } from '@dcloudio/uni-app'
import type { ArticleItem } from '@/types/article'
import type { KpcodeJackEntity, KpcodeJackWinningCountEntity } from '@/types/jack'

onLoad(() => {
  getSystemList()
  getWiningList()
})
// const articleList = ref<ArticleItem[]>([])
// const getNoticeList = async () => {
//   const res = await getArticleListApi({ cid: '1' })
//   articleList.value = res.data.records
// }

// 获取中奖公告数据
const winingList = ref<KpcodeJackWinningCountEntity[]>([])
const getWiningList = async () => {
  const res = await getJackWingNoteListApi()
  winingList.value = res.data
}

// 获取平台公告数据
const systemList = ref<ArticleItem[]>([])
const getSystemList = async () => {
  const res = await getArticleListApi({ cid: '3' })
  systemList.value = res.data.records
}

// tabs 数据
const orderTabs = ref([
  { orderState: 0, title: '中奖公告' },
  { orderState: 1, title: '平台通知' },
])
const activeIndex = ref(0)
</script>

<template>
  <view class="viewport">
    <!-- tabs -->
    <view class="tabs">
      <text
        class="item"
        v-for="(item, index) in orderTabs"
        :key="item.title"
        @tap="activeIndex = index"
      >
        {{ item.title }}
      </text>
      <!-- 游标 -->
      <view class="cursor" :style="{ left: activeIndex * 50 + 10 + '%' }"></view>
    </view>
    <!-- 滑动容器 -->
    <swiper class="swiper" :current="activeIndex" @change="activeIndex = $event.detail.current">
      <!-- 滑动项 -->
      <swiper-item>
        <!-- 列表 -->
        <scroll-view scroll-y class="orders">
          <!-- <uni-list :border="true">
            <uni-list-item
              v-for="item in articleList"
              :key="item.id"
              :avatar-circle="true"
              :title="item.title"
              :note="item.createTime"
              showArrow
              :thumb="item.cid == '3' ? '/static/images/tz_icon.png' : '/static/images/gg_icon.png'"
              thumb-size="lg"
              :to="'/pages/newsDetail/newsDetail?id=' + item.id"
            />
          </uni-list> -->
          <!-- 中奖公告 -->
          <template v-if="winingList.length > 0">
            <view v-for="item in winingList" :key="item.id" class="kaijiang">
              <view class="period">{{ item.jackPeriod }}</view>
              <view class="time">
                <view>
                  开奖日期：
                  <text>{{ item.jackStartTime }}</text>
                </view>
                <view>
                  兑奖截止日期：
                  <text>{{ item.jackEndTime }}</text>
                </view>
              </view>
              <view class="table">
                <view class="title">
                  <view class="item1">奖项</view>
                  <view class="item2">中奖人数</view>
                  <view class="item3">奖金(税前)</view>
                </view>
                <view class="col">
                  <view class="item1">一等奖</view>
                  <view class="item2">{{ item.firstNo }}</view>
                  <view class="item3">{{ item.firstPrize }}</view>
                </view>
                <view class="col">
                  <view class="item1">二等奖</view>
                  <view class="item2">{{ item.secondNo }}</view>
                  <view class="item3">{{ item.secondPrize }}</view>
                </view>
                <view class="col">
                  <view class="item1">三等奖</view>
                  <view class="item2">{{ item.thirdNo }}</view>
                  <view class="item3">{{ item.thirdPrize }}</view>
                </view>
                <view class="col">
                  <view class="item1">四等奖</view>
                  <view class="item2">{{ item.fourthNo }}</view>
                  <view class="item3">{{ item.fourthPrize }}</view>
                </view>
                <view class="col">
                  <view class="item1">五等奖</view>
                  <view class="item2">{{ item.fifthNo }}</view>
                  <view class="item3">{{ item.fifthPrize }}</view>
                </view>
                <view class="col">
                  <view class="item1">六等奖</view>
                  <view class="item2">{{ item.sixthNo }}</view>
                  <view class="item3">{{ item.sixthPrize }}</view>
                </view>
                <view class="col">
                  <view class="col_total">中奖总金额</view>
                  <view class="col_total">{{ item.winningTotalPrice }}</view>
                </view>
                <!-- <view class="col">
                  <view class="col_total">奖池金额</view>
                  <view class="col_total">{{ item.jackpotPrice }}</view>
                </view> -->
              </view>
            </view>
          </template>

        </scroll-view>
      </swiper-item>
      <!-- 滑动项 -->
      <swiper-item>
        <!-- 列表 -->
        <scroll-view scroll-y class="orders">
          <uni-list :border="true">
            <uni-list-item
              v-for="item in systemList"
              :key="item.id"
              :avatar-circle="true"
              :title="item.title"
              :note="item.createTime"
              showArrow
              :thumb="item.cid == '3' ? '/static/images/tz_icon.png' : '/static/images/gg_icon.png'"
              thumb-size="lg"
              :to="'/pages/newsDetail/newsDetail?id=' + item.id"
            />
          </uni-list>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>

  <!-- <uni-load-more status="more"></uni-load-more> -->
</template>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}
.kaijiang {
  background-color: #fff;
  margin: 10px;
}
.period {
  font-size: 14px;
  color: #fff;
  padding: 8px 10px;
  border-bottom: 1px solid #eee;
  background: #27ba9b;
  font-weight: bold;
}
.time {
  font-size: 12px;
  color: #333;
  padding: 8px 10px;
  line-height: 1.5em;
  border-bottom: 1px solid #eee;
}
.table {
  font-size: 12px;
  color: #666;

  .title {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-weight: bold;
    background-color: #d0f3eb;
  }
  .col {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .item1, .item2, .item3, .col_total {
    width: 33%;
    text-align: center;
    border-bottom: 1px solid #eee;
    border-left: 1px solid #eee;
    padding: 5px 0;
  }
  .item3 {
    width: 34%;
    border-right: 1px solid #eee;
  }
  .col_total:first-child {
    width: 66%;
  }
  .col_total:last-child {
    width: 34%;
    border-right: 1px solid #eee;
    font-weight: bold;
  }
}
// tabs
.tabs {
  display: flex;
  justify-content: space-around;
  line-height: 60rpx;
  margin: 0 10rpx;
  background-color: #fff;
  box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
  position: relative;
  z-index: 9;

  .item {
    flex: 1;
    text-align: center;
    padding: 20rpx;
    font-size: 28rpx;
    color: #262626;
  }

  .cursor {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30%;
    height: 6rpx;
    padding: 0 50rpx;
    background-color: #27ba9b;
    /* 过渡效果 */
    transition: all 0.4s;
  }
}

// swiper
.swiper {
  background-color: #f7f7f8;
  padding-bottom: 30px;
}
</style>
